.steps-box {
  display: flex;
  position: relative;
  width: 100%;
  top:0;
  left: 0;
  white-space: nowrap;
  height: 186rpx;
  // background: linear-gradient(to right,#0099F7,#0061E3);
  .left-triangle{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 80rpx solid #F3F6FA;
    border-right: 120rpx solid transparent;
  }
  .right-triangle{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 80rpx solid #F3F6FA;
    border-left: 120rpx solid transparent;
  }
  .steps {
    position: absolute;
    height: 160rpx;
    width: 682rpx;
    margin-top: 20rpx;
    background: rgba(255,255,255,0.95);
    box-shadow: 0rpx 14rpx -14rpx 0rpx #00235B;
    border-radius: 8rpx;
    display: flex;
    .step {
      flex-basis: 25%;
      position: relative;
      text-align: center;
    .step__head {
      color: #ccc;
      border-color: #ccc;
      margin-top:42rpx;
      height: 20rpx;
      position: relative;
    }
    &.isSuccess {
      color: #0061E3;
      border-color: #0061E3;
      .step-icon {
        background: #0061E3;
        border-color: #0061E3;
      }
      .step-title {
        color:#111111;
      }
    }
    .step-line {
      position: absolute;
      height: 2px;
      top: 9rpx;
      left: 50%;
      right: -50%;
      background: #ccc;
      &.suc-line {
        background: #0061E3;
      }
    }
    .step-icon {
      display: inline-flex;
      position: absolute;
      border-radius: 50%;
      top:0;
      border: 10rpx solid;
      background: #ccc;
      width: 20rpx;
      height: 20rpx;
      z-index: 1;
    }
    .step-title {
      color: #999999;
      font-size: 24rpx;
      margin-top: 31rpx;
    }
  }
  }
}